<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets">

<!-- 
		Replace path to template, title, header and body
		with actual data.
	 -->
<ui:composition template="/templates/store.xhtml">
	<ui:define name="pageTitle">Gestion des promotions</ui:define>
	<ui:define name="pageHead"></ui:define>
	<ui:define name="first"></ui:define>
	<ui:define name="body">
		<div class="row">

			<h1>Liste des promotions</h1>

			<dl class="sub-nav">
				<dt>Tri :</dt>
				<dd class="active">
					<a href="#">Plus anciennes</a>
				</dd>
				<dd>
					<a href="#">Plus récentes</a>
				</dd>
			</dl>

			<div class="big-10 medium-9 small-12 small-pull-12 columns">
				<table>
					<thead>
						<tr>
							<th width="50">Référence</th>
							<th width="150">Intitulé</th>
							<th width="150">Description</th>
							<th width="50">Date de début</th>
							<th width="50">Date de fin</th>
							<th width="40">Réduction</th>
						</tr>
					</thead>
					<tbody>
						<tr>
							<td>1</td>
							<td><a href="#" data-reveal-id="updatePromotion">Solde
									d'été</a></td>
							<td><span>Solde d'été</span></td>
							<td><span>10/07/2014</span></td>
							<td><span>25/07/2014</span></td>
							<td>50%</td>
						</tr>
						<tr>
							<td>2</td>
							<td><a href="#" data-reveal-id="updatePromotion">Solde
									d'hiver</a></td>
							<td><span>Solde d'hiver</span></td>
							<td><span>10/12/2013</span></td>
							<td><span>22/01/2014</span></td>
							<td>30%</td>
						</tr>
						<tr>
							<td>2</td>
							<td><a href="#" data-reveal-id="updatePromotion">Solde
									d'hiver</a></td>
							<td><span>Solde d'hiver</span></td>
							<td><span>10/12/2013</span></td>
							<td><span>22/01/2014</span></td>
							<td>30%</td>
						</tr>
						<tr>
							<td>2</td>
							<td><a href="#" data-reveal-id="updatePromotion">Solde
									d'hiver</a></td>
							<td><span>Solde d'hiver</span></td>
							<td><span>10/12/2013</span></td>
							<td><span>22/01/2014</span></td>
							<td>30%</td>
						</tr>
						<tr>
							<td>2</td>
							<td><a href="#" data-reveal-id="updatePromotion">Solde
									d'hiver</a></td>
							<td><span>Solde d'hiver</span></td>
							<td><span>10/12/2013</span></td>
							<td><span>22/01/2014</span></td>
							<td>30%</td>
						</tr>
					</tbody>
				</table>
				<div class="pagination-centered">
					<ul class="pagination">
						<li class="arrow unavailable"><a href="">&laquo;</a></li>
						<li class="current"><a href="">1</a></li>
						<li><a href="">2</a></li>
						<li><a href="">3</a></li>
						<li><a href="">4</a></li>
						<li class="unavailable"><a href="">&hellip;</a></li>
						<li><a href="">12</a></li>
						<li><a href="">13</a></li>
						<li class="arrow"><a href="">&raquo;</a></li>
					</ul>
				</div>
				
			</div>
			<div class="big-2 medium-3 small-12 columns">
			<form>
				<h3>Recherche</h3>
				<br />  <label>Référence promotion</label> <input type="text" placeholder="Entrez la référence" />
				
						<input id="dateDebutPromo" type="text" placeholder="Début promo"/>
						<input id="dateFinPromo" type="text" placeholder="Fin promo"/>
						 
						<a href="#"	class="button radius tiny">Rechercher</a> 
						<a href="#"	class="button radius tiny alert">Réinitialiser</a> <br /> <br /> <br />
						<a href="#" data-reveal-id="createPromotion" class="button radius success">Créer une promotion</a>
				</form>
			</div>
		</div>
		<div id="createPromotion" class="reveal-modal" data-reveal="true">
			<ui:include src="./forms/creerPromo.xhtml" />
		</div>
		<div id="updatePromotion" class="reveal-modal" data-reveal="true">
			<ui:include src="./forms/modifierPromo.xhtml" />
		</div>

	</ui:define>
	<ui:define name="last">
		<!-- Other JS plugins can be included here -->
		<script>
    $('#datePromoDebutCreate').datetimepicker({
    	 lang:'fr',
    	 timepicker:false,
    	 format:'d/m/Y'
    	});
    $('#datePromoFinCreate').datetimepicker({
   	 lang:'fr',
   	 timepicker:false,
   	 format:'d/m/Y'
   	});
    $('#datePromoDebutUpdate').datetimepicker({
   	 lang:'fr',
   	 timepicker:false,
   	 format:'d/m/Y'
   	});
   $('#datePromoFinUpdate').datetimepicker({
  	 lang:'fr',
  	 timepicker:false,
  	 format:'d/m/Y'
  	});
   $('#dateDebutPromo').datetimepicker({
	  	 lang:'fr',
	  	 timepicker:false,
	  	 format:'d/m/Y'
	  	});
   $('#dateFinPromo').datetimepicker({
	  	 lang:'fr',
	  	 timepicker:false,
	  	 format:'d/m/Y'
	  	});
  </script>
	</ui:define>
</ui:composition>

</html>